<template>
	<div>
		<u-navbar title="系统消息"> </u-navbar>
		<div class="drop-list"  :style="{paddingTop:statusBarHeight + 'px' }">
			<div class="drop-list-tab">
				<u-tabs :list="list" active-color="#333" :is-scroll="false" :current="current" @change="changeTabs">
				</u-tabs>
			</div>

		</div>
		<div class="global-list">
			<u-collapse v-if="messageData.length != 0">
				<u-collapse-item class="item" :title="item.title" @change="changeMessage" @click="handleClickBill(item)"
					v-for="(item,index) in messageData[list[current].value].records" :index="index" :key="index">
					<div class="content"> {{item.content}}</div>
					<div class="del" v-if="item.status == 'UN_READY'">
						<span>{{item.createTime}}</span>
					</div>
					<div class="del" v-if="item.status == 'ALREADY_READY'">
						<span>{{item.createTime}}</span>
						<span @click="handleDeleteMessage(item)">删除</span>
					</div>
					<div class="del" v-if="item.status == 'ALREADY_REMOVE'">
						<span>{{ item.createTime }}</span>
						<div>
							<span style="margin-right: 18rpx;" @click="handleReductionMessage(item)">还原消息</span>
							<span @click="handleClearMessage(item)">彻底删除</span>
						</div>
					</div>
				</u-collapse-item>
			</u-collapse>
		</div>
	</div>
</template>

<script>
	import {
		getAllMessage,
		readMessage,
		deleteMessage,
		reductionMessage,
		clearMessage,
	} from "@/api/home";
	let systemInfo = uni.getSystemInfoSync();
	export default {
		watch: {
			current(index) {
				this.searchForm.billStatus = this.list[index].value;
				this.load();
			},
		},

		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				messageData: [],
				current: 0,
				searchForm: {
					// 搜索框初始化对象
					pageNumber: 1, // 当前页数
					pageSize: 15, // 页面大小
					sort: "createTime", // 默认排序字段
					order: "desc", // 默认排序方式
					startDate: "", // 起始时间
					endDate: "", // 终止时间
					status: "UN_READY",
				},
				list: [{
						name: "未读消息",
						value: "UN_READY",
					},
					{
						name: "已读消息",
						value: "ALREADY_READY",
					},
					{
						name: "回收站",
						value: "ALREADY_REMOVE",
					},
				]
			};
		},

		methods: {
			onShow() {
				this.messageData = [];
				this.searchForm.pageSize = 15;
				this.init();
			},
			onReachBottom() {
				const total = this.messageData[this.list[this.current].value].total
				const length = this.messageData[this.list[this.current].value].records.length
				if (length < total) {
					this.searchForm.pageSize = this.searchForm.pageSize + 10;
					this.init();
				}
			},

			// 已读消息
			async changeMessage(val) {
				// 如果回调的show为 true 说明看见了内容，标记为已读
				if (val.show) {
					// 判断是否是未读的选项
					let key = this.list[this.current].value;
					if (key == "UN_READY") {
						await readMessage(this.messageData[key].records[val.index].id);
					}
				}
			},

			//已读消息中点击删除 ，将消息删到回收站里面
			async handleDeleteMessage(val) {
				let res = await deleteMessage(val.id);
				if (res.data.success) {
					uni.showToast({
						title: "删除成功!",
						duration: 2000,
						icon: "none",
					});
					this.load();
				}
			},

			// 还原消息
			async handleReductionMessage(val) {
				await reductionMessage(val.id);
				this.load();
			},

			// 彻底清空消息
			async handleClearMessage(val) {
				await clearMessage(val.id);
				this.load();
			},

			changeTabs(index) {
				this.current = index;
			},

			load() {
				this.searchForm.pageSize = 15;
				this.searchForm.startDate = "";
				this.searchForm.endDate = "";
				this.messageData = [];
				this.init();
			},

			async init() {
				uni.showLoading({
					title: "加载中",
				});
				let res = await getAllMessage(this.searchForm);
				if (res.data.success) {
					console.log(res.data.result);
					this.messageData = res.data.result;
				}
				uni.hideLoading();
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/components/global.scss";

	.item {
		display: flex;
		padding: 20rpx;
	}

	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}

	.global-list {
		padding: 34rpx;
	}

	.drop-list-tab {
		overflow: hidden;
		flex: 1 !important;
	}

	.item {
		display: flex;
		flex-direction: column;
	}

	.content {
		color: #333 !important;
		margin-bottom: 24rpx;
	}

	.del {
		font-size: 24rpx;
		color: #999;
		display: flex;
		justify-content: space-between;

		>span {
			margin: 0 8rpx;
		}
	}

	@media screen and(min-width:750rpx) {
		/deep/ .u-navbar-inner {
			height: 100rpx !important;
		}

		/deep/ .u-navbar-placeholder {
			height: 100rpx !important;
		}
	}
</style>
